<template>
	<view class="zy_number_box_container">
		<view class="zy_number_box" :style="[{color:`${color}`}]">
			<!-- 减号按钮 -->
			<button :class="borderColor?'zy_number_box_btn_minus_border':'zy_number_box_btn_minus'"
				@click="change(Number(-step))" :disabled="parentValue<=min ||disabled"
				:style="[{background:parentValue<=min ||disabled==true ?`${disbgcolor}`:`${bgcolor}`,color:parentValue<=min ?`${discolor}`:`${color}`,fontSize:`${size}px`,borderColor:`${borderColor}`}]">
				-
			</button>
			<!-- 输入框 -->
			<input :class="borderColor?'zy_number_box_input_border':'zy_number_box_input'"
				:style="[{background:`${bgcolor}`,width:`${inputwidth}px`,fontSize:`${size}px`,borderColor:`${borderColor}`}]"
				type="number" v-model="parentValue" :disabled="inputdisabled" :focus="focus" @input="input" />
			<!-- 加号按钮 -->
			<button :class="borderColor?'zy_number_box_btn_plus_border':'zy_number_box_btn_plus'"
				@click="change(Number(step))" :disabled="parentValue>=max ||disabled"
				:style="[{background:parentValue>=max ||disabled==true  ?`${disbgcolor}`:`${bgcolor}`,color:parentValue>=max ?`${discolor}`:`${color}`,fontSize:`${size}px`,borderColor:`${borderColor}`}]">
				+
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//用于双向绑定的值，初始化时设置设为默认min值(最小值)
			value: {
				type: String | Number,
				default: 0
			},
			// 步长，每次加或减的值，支持小数值
			step: {
				type: String | Number,
				default: 1
			},
			//可输入的最小值
			min: {
				type: String | Number,
				default: 0
			},
			//可输入的最大值
			max: {
				type: String | Number,
				default: Number.MAX_SAFE_INTEGER
			},
			//加减号禁用
			disabled: {
				type: Boolean,
				default: false
			},
			//输入框焦点
			focus: {
				type: Boolean,
				default: false
			},
			//输入框禁用
			inputdisabled: {
				type: Boolean,
				default: false
			},
			//字体颜色
			color: {
				type: String,
				default: '#222222'
			},
			//禁用状态下字体颜色
			discolor: {
				type: String,
				default: '#999999'
			},
			//背景颜色
			bgcolor: {
				type: String,
				default: '#EBECEE'
			},
			//禁用状态下背景颜色
			disbgcolor: {
				type: String,
				default: '#F7F8FA'
			},
			//border的颜色，默认无
			borderColor: {
				type: String,
				default: ''
			},
			//input框的宽度，单位px
			inputwidth: {
				type: String | Number,
				default: '35'
			},
			//button和input的大小,最小设置为12,否则样式对不齐
			size: {
				type: String | Number,
				default: '12'
			},
			// 限制只输入整数
			integer: {
				type: Boolean,
				default: false
			},
			// 限制只输入两位小数
			decimal: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			value: {
				handler(newVal) {
					console.log(newVal)
					this.parentValue = newVal
				},
				immediate: true,
				deep: true,
			},
			max: {
				handler(newVal) {
					this.max = newVal
				},
				immediate: true,
				deep: true,
			}
		},
		data() {
			return {
				parentValue: '',
			}
		},
		methods: {
			//步进器加/减事件
			change(n) {
				this.parentValue = this.parentValue * 1 + n
				if (this.parentValue > this.max) {
					this.parentValue = this.max
				} else if (this.parentValue < this.min) {
					this.parentValue = this.min
				}
				console.log(this.parentValue)
				this.$emit('change', this.parentValue)

			},
			input(e) {
				if (e.detail.value > this.max) {
					this.parentValue = this.max
				} else if (e.detail.value < this.min) {
					this.parentValue = this.min
				} else if (this.integer == true) {
					//过滤小数点后数字
					e.detail.value = e.detail.value.replace(/[^0-9.-]/g, '').split('.')[0]
					this.$nextTick(() => {
						this.parentValue = e.detail.value
					})
				} else if (this.decimal == true) {
					//只允许输入两位小数
					this.$nextTick(() => {
						this.parentValue = (e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0]) || ''
					})
				}
				this.$emit('change', this.parentValue)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>